<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .memberBox {
            background: rgba(88, 140, 233, 0.1);
            border-radius: 2px;
            font-size: 12px;
            font-weight: 400;
            color: #588CE9;
            line-height: 20px;
            padding: 0 3px;
        }
    </style>
</head>

<body>

    <div id="app"></div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/TypewriterJS/2.21.0/core.min.js"></script>
    <script>
        var app = document.getElementById('app');

        var typewriter = new Typewriter(app, {
            // loop: true,
            delay: 10,
        });
        const rosters = {
            153424: {
                name: '杨昊',
                photo: 'https://ykj-open-api-test.yonyoucloud.com/iuap-apcom-file-public/iuap-apcom-file/0/2023080414/a82f30dc-cc16-4c42-9994-6305ee4269b8.png.thumb.jpg'
            },
            3459165: {
                name: '昵称&张良云',
                photo: 'https://ykj-esn-test.obs.cn-north-4.myhuaweicloud.com/iuap-apcom-file/2022/07/05/14/16/4532bc6d-072c-4bd0-82f8-400bb2ce99ec.png.thumb.jpg'
            },
            3803457: {
                name: '杨永安',
                photo: 'https://ykj-esn-test.obs.cn-north-4.myhuaweicloud.com/92052/3803457/202109/18/16319555567cd06635eaaf09afba1f64bd1df46629.jpg.thumb.jpg'
            },
            3808219: {
                name: '朱天昊',
                photo: ''
            },
            4592434: {
                name: '马英杰',
                photo: ''
            }
        }

        var a = '1.[#3459165] 询问[#3803457] 北京有啥好玩的地方 2.[#3803457] 建议[#3459165] 去旅游网站查找信息3.[#3459165] 提到国庆出去人太多了，好玩的地方人挤人。4.[#38034571] 询问[#3459165] 去过哪里，并表示自己没怎么出去玩。5.[#3459165] 推荐去珠穆朗玛峰和新疆旅游，欣赏沿途美妙的风景和品尝烤羊肉串'

        let flag = false // 判断是否正在等新消息
        let i = 0

        var _holdArr = []
        function hold(str, _flag = false) {
            _holdArr.push(str)
            if (_flag) {
                console.log('开始获取11111');
                flag = false
                let str = getValue(_holdArr.join(''))
                _holdArr = []
                print(str)
            }
        }

        function getValue(key) {
            _holdArr = []
            console.log('1', key);
            let str1 = extractNumber(key, 0) // 获取到【#xxx】
            console.log('2', str1);
            if (str1) {
                
                let id = extractNumber(str1) // 获取到xxx
                console.log('3', id);
                if (id && rosters[id]) {
                    console.log('4', rosters[id].name);
                    
                    return key.replace(str1, `<span class="memberBox">@${rosters[id].name}<span></span></span>`)
                }
            }
            return key
        }

        function aaa(string) {

        }

        function extractText(string) {

        }

        function extractNumber(string, type = 1) {
            // type =1 代表要取出[#xxx], 0 代表取出 xxx
            let pattern
            if (type === 0) {
                pattern = /\[(#\d+)\]/;  // 取出[#xxxxxxx]
            } else {
                pattern = /^\[#(\d+)\]$/;
            }
            var match = string.match(pattern);

            if (match) {
                return match[type];
            } else {
                return null;
            }
        }

        let interval = setInterval(() => {
            if (i < a.length-1) {
                // console.log('发送', i, a[i]);

                let _word = a[i] + a[i + 1] || ''

                console.log('发送', _word, i, _word.indexOf[']'] > -1);

                if (_word.indexOf('[') > -1 && !flag) {
                    flag = true
                    console.log('开始识别人名');
                    hold(_word)
                } else if (_word.indexOf(']') > -1) {
                    // ] 
                    hold(_word, true)
                    flag = false
                    console.log('识别人名结束');
                } else if (flag) {
                    // hold 住
                    hold(_word)
                } else {
                    print(_word)
                }
                i += 2
            } else {
                clearInterval(interval)
            }
        }, 50);

        function print(word) {
            typewriter.typeString(word).start()
        }

        // typewriter.typeString('<span>昵称&张良云</span>').start()
    </script>
</body>

</html>